<template>
  <div class="chart" id="linechart">
  </div>
</template>

<script>
  import { inject, onMounted, reactive  } from "vue";
  import emitter from '../bus'

  export default {
      setup() {
    // 引入echarts
    let $echarts = inject("echarts");
    let $http = inject("axios");
    // 数据接收
    let LineData = reactive({});
    let xdata = reactive([]);
    let qiwen = reactive([]);
    let aqi = reactive([]);
    let fensu = reactive([]);
    function setData(mouth) {
      xdata.splice(0,xdata.length)
      qiwen.splice(0,qiwen.length)
      aqi.splice(0,aqi.length)
      fensu.splice(0,fensu.length)
      if (LineData.data.length > 0) {
          for (let item of LineData.data) {
            // item['年']==2021&&
            if(item['月']==mouth){
              xdata.push(item['日']);
              qiwen.push(item['气温']*10);
              aqi.push(item['AQI']);
              fensu.push(item['风速']*20);
            }
          }
      }
    }
    async function getState() {
      LineData = await $http({ url: "/cityday/city-day" });
      console.log(LineData.data)
    }
    onMounted(() => {
    drawLine(1)
    emitter.on('linemouth', (linemouth) => {
      drawLine(linemouth)
        })
    function drawLine(mouth){
      
      // 初始化echarts
      let myChart = $echarts.init(document.getElementById("linechart"));
      getState().then(() => {
        setData(mouth);
        myChart.setOption({
          title: 
          {
            text: mouth+'月份气温-AQI-风速折线图',
            left: 'center',
            top: '8%',
            textStyle:{
                  color: 'bisque'//字体颜色
                },
            // triggerEvent: true,
          },
          tooltip: {
            trigger: 'axis',
            // enterable: true,
            // // 触发方式 mousemove, click, none, mousemove|click
            // triggerOn: `click`, 
            // // item 图形触发， axis 坐标轴触发， none 不触发
            // // trigger: `item`, 
            // // 浮层隐藏的延迟
            // hideDelay: 800,
            // // 背景色
            // backgroundColor: `rgba(0,0,0,0)`,
            // formatter: function (params) {
            //   console.log(params[0].data)
            //    return `<div class=chartLabel>
            //   <div class=title>${params[0].data}</div>
            //   <div class=label>到达时间:2020.10.11</div>
            //   <button id="btn-tooltip">查看更多</button>
            // </div>`
            // }
          },
          legend: {
            data: ['气温', '风速', 'AQI']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          // toolbox: {
          //   feature: {
          //     saveAsImage: {}
          //   }
          // },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data:xdata,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '气温',
              type: 'line',
              stack: 'Total',
              data: qiwen,
            },
            {
              name: '风速',
              type: 'line',
              stack: 'Total',
              data: fensu,
            },
            {
              name: 'AQI',
              type: 'line',
              stack: 'Total',
              data: aqi,
            }
          ]
        });
        window.onresize = myChart.resize;
        myChart.on("click", params => {
          console.log('这是折线图的点击数据',params.data)
          })
      });
    
    }
    });
    return {
      getState,
      LineData,
      xdata,
      qiwen,
      fensu,
      aqi,
      setData,
    };
  },
  }
</script>

<style lang="css" scoped>
.chart {
  height: 400px;
}
</style>